<template>
  <div>
    <el-dialog
      class="preview-dialog"
      title=""
      :visible.sync="dialogVisible"
      width="100%"
      :before-close="handleClose"
    >
      <div class="preview-cneter">
        <div class="preview-video" v-if="fileItem.fileType === 'V'">
          <video
            width="600px"
            height="400px"
            :src="previewUrl"
            controls
          ></video>
        </div>

        <div class="preview-audio" v-if="fileItem.fileType === 'A'">
          <audio controls>
            <source :src="previewUrl" />
          </audio>
        </div>
      </div>

      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>

    <image-preview
      :width="0"
      :height="0"
      ref="imagePreview"
      :src="previewUrl"
    ></image-preview>
  </div>
</template>

<script>
export default {
  name: "FilePreView",
  props: {},
  data() {
    return {
      previewUrl: "",
      dialogVisible: false,
      fileItem: {},
    };
  },
  computed: {},
  methods: {
    open(obj) {
      if (!!obj) {
        const { fileUrl, fileType } = obj;
        this.previewUrl = fileUrl;
        if (fileType === "P") {
          this.$nextTick(() => {
            this.$refs.imagePreview.open();
          });
        } else {
          this.fileItem = obj;
          this.dialogVisible = true;
        }
      }
    },
    handleClose(done) {
      this.fileItem = {};
      this.previewUrl = "";
      done();
    },
  },
};
</script>

<style lang="scss" scoped>
.preview-cneter {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(80vh);
  width: 100%;
}

.preview-video {
  width: 600px;
  height: 400px;
  background-color: #fff;
}
</style>
